<template>
  <div ref="goods-classify-content" class="goods-content-main">
    <div>
      <div class="goods-wrap" v-for="(item, index) in goods" :key="index">
        <div class="classify-name">{{item.title}}</div>
        <div class='goods-items-wrap'>
          <ul v-for="item2 in item.goods" :key="item2.gid"
              @click="$router.push({name: 'goods-detail', query: {gid: item2.gid}})">
            <li><img v-lazy="item2.image" :alt="item2.title"/></li>
            <li>{{item2.title}}</li>
          </ul>
        </div>
      </div>
      <div class="no-data" v-show="goods.length <= 0">
        没有数据
      </div>
    </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { classifyGoods } from 'api/goods'

export default {
  name: 'classifyItem',
  data () {
    return {
      goods: []
    }
  },
  methods: {
    init (cid) {
      classifyGoods(cid).then(res => {
        if (res.code === 200) {
          this.goods = res.data
        } else {
          this.goods = []
        }
      })
    },
    initScroll () {
      document.title = this.$route.meta.title
      this.scroller = new BScroll(this.$refs['goods-classify-content'], {
        click: true
      })
    },
    destoryScroll () {
      this.scroller && this.scroller.destroy()
    }
  },
  created () {
    let cid = this.$route.query.cid ? this.$route.query.cid : ''
    this.init(cid)
  },
  mounted () {
    this.initScroll()
    this.scroller.scrollTo(0, 0)
  },
  destroyed () {
    this.destoryScroll()
  },
  beforeRouteUpdate (to, from, next) {
    this.init(to.query.cid)
    this.scroller.scrollTo(0, 0)
    next()
  }
}
</script>
<style lang="scss" scoped>
  .goods-content-main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }

  .goods-wrap {
    width: 100%;
    height: auto;

    .classify-name {
      font-size: 0.28rem;
      width: 100%;
      height: 0.6rem;
      line-height: 0.6rem;
      overflow: hidden;
    }

    .goods-items-wrap {
      width: 100%;
      height: auto;
      background-color: #FFFFFF;
      padding-top: 0.2rem;
      overflow: hidden;

      ul {
        width: 32%;
        height: auto;
        float: left;
        margin-left: 0.5%;
        margin-right: 0.5%;
        margin-bottom: 0.2rem;

        li:nth-child(1) {
          width: 1.5rem;
          height: 1.5rem;
          overflow: hidden;
          margin: 0 auto;
          text-align: center;

          img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
          }
        }

        li:nth-child(2) {
          width: 90%;
          height: 0.8rem;
          font-size: 0.24rem;
          overflow: hidden;
          text-align: center;
          margin: 0 auto;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 0.2rem;
        }
      }
    }
  }


</style>
